<template>
    <div class="contactUs">
        <div class="navtop">
            联系我们 Contact Us
        </div>
        <div class="contain">
            <div class="editinfo">
                <input></input>
                <input></input>
                <textarea></textarea>
                <a href="#" class="liuyan">给我们留言</a>
            </div>
            <div class="contactinfo">
               <img src="../../assets/img/c1.png" />
                <img src="../../assets/img/c5.png" />
                <img src="../../assets/img/c31.png" />
                <img src="../../assets/img/c4.png" />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "contactUs"
    }
</script>

<style lang="less" scoped>
.navtop{
    width: 100%;
    height: 25vh;
    background: url(http://s.dddua.com/images/cdn/a1.jpg) 100% 100% no-repeat;
    color: #fff;
    line-height:25vh;
    /*padding-top: 100px;*/
    text-align: center;
    font-size: 20px;
}
    .contain{
        width: 100%;
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box;
        padding: 10vh 0;
        display: flex;
        justify-content:space-evenly;
        .editinfo{
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            width: 40vw;
            /*border: 1px solid red;*/
            input{
                width: 100%;
                border: none;
                background-color: #eef4f6;
                line-height: 0.55rem;
                height: 0.55rem;
                text-indent: 10px;
                color: #999;
                font-size: 14px;
                margin-bottom: 0.25rem;

            }
            textarea{
                width: 100%;
                border: none;
                background-color: #eef4f6;
                line-height: 0.55rem;
                height:1.5rem;
                text-indent: 0.1rem;
                color: #999;
                font-size: 14px;
                margin-bottom: 0.25rem;
            }
            .liuyan {
                width: 210px;
                height: 58px;
                display: block;
                border: none;
                background-color: #2fb0e7;
                text-align: center;
                color: #fff;
                font-size: 18px;
                line-height: 58px;
                border-radius: 8px;
                font-family: "Microsoft Yahei";
            }
        }
        .contactinfo{
            width: 40%;
            /*border: 1px solid yellow;*/
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            img{
                width: 48%;
                height: 48%;
            }
        }
    }
</style>